<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }
    
    /* Set up the page with a default background image */
    body {
        background-color:#fff;
        color:#000;
        font-family:Arial;
        font-size:36pt;
        margin:0px;padding:0px;
        background-image:url('images/background.jpg');

    }

    input[type=text], input[type=email], input[type=password] {
        font-size:24pt;
    } 

    button {
        font-size: 56px;
    }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js"></script> 
<script type="text/javascript" charset="utf-8" src="_appMobi/appmobi_local_bootstrap.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script> 
<script type="text/javascript">
/* This function runs once the page is loaded, but appMobi is not yet active */
var init = function(){

};
window.addEventListener("load",init,false);  

/* This code prevents users from dragging the page */
var preventDefaultScroll = function(event) {
    event.preventDefault();
    window.scroll(0,0);
    return false;
};
document.addEventListener('touchmove', preventDefaultScroll, false);

/* This code is used to run as soon as appMobi activates */
var onDeviceReady=function(){
    //Size the display to 768px by 1024px
    AppMobi.display.useViewport(768,1024);
    
    //hide splash screen
    AppMobi.device.hideSplashScreen();  
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);    
</script>
<script type="text/javascript">

    var failed = false;
    $(document).ready(function(){
        $('#submit').click(function(){
            var username = $('#username').val();
            var password = $('#password').val();
            var varData = 'username=' + username + '&password=' + password;
            console.log(varData);
            $.ajax({
                type: "POST",
                url: "http://localhost:8000/Uni/Project/Emailtest/login.php",
                data: varData,
                success: function(data){
                    if(IsNumeric(data)){
                        console.log(data);
                        sessionStorage.userID = data;
                        sessionStorage.username = username;
                        $("h1").html(sessionStorage.username + " Login Success");
                        $("form").remove();
                        $("button").remove();
                        $("#failed").remove();
                    }
                    else
                    {
                        console.log(data);
                        if(!failed)
                            $("h1").before(data);
                        failed = true;
                    }
                }
            });
        });
    });
        
    function IsNumeric(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

</script>
</head>
    <body>
        <h1>Login</h1>
        <form>
            <input type="text" name="username" id="username" />
            <label for="username">Username</label>
            <br>
            <input type="password" name="password" id="password" />
            <label for="password">Password</label>
            <br>
        </form>
        <button id="submit">Click to submit</button>
        <div id="test"><a href="index.html">back</a><div>
    </body>
</html>